<template>
    <el-dialog v-model="props.visible" title="计划详情" @close="onClose">
        <div class="dialog-content">
            <div ref="chartDom" style="width: 100%; height: 400px;"></div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onClose">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

interface Props {
    visible: boolean;
    onCloseButton: Function;
    chartDom: any[];
}

const props = defineProps<Props>();
const emits = defineEmits(['update:visible']);
const chartDom = ref(null);

function onClose() {
    props.onCloseButton();
}
watch(() => props.visible, (newVal) => {
    if (newVal && chartDom.value) {
        loadSankeyData();
    }
});
// 解析数据并生成模拟数据
const generateMockData = (data: any[]) => {

    console.log([data], 'oadSankeyDatoadSankeyDat')
    const nodes = [];
    const links = [];

    // 添加主计划节点
    [data].forEach((plan, planIndex) => {
        nodes.push({ name: plan.planNo, depth: 0 });

        // 添加子计划节点
        plan.children.forEach((detail, detailIndex) => {
            const nodeName = `${plan.planNo}-${detail.procedureName}`;
            nodes.push({ name: nodeName, depth: 1 });

            // 添加链接
            links.push({
                source: planIndex,
                target: nodes.length - 1,
                value: detail.orderCount || 6
            });
        });
    });

    return { nodes, links };
};

function loadSankeyData() {
    if (!chartDom.value) {
        console.error('DOM element is not available yet');
        return;
    }
    const mockData = generateMockData(props.chartDom);
    const { nodes, links } = mockData;
    console.log(mockData, 'mockData')
    const option = {
        title: {
            text: 'Sankey Diagram'
        },
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove',
            formatter: params => {
                return params.data.name;
            }
        },
        series: [
            {
                type: 'sankey',
                data: nodes,
                links: links,
                emphasis: {
                    focus: 'adjacency'
                },
                levels: [
                    {
                        depth: 0,
                        itemStyle: {
                            color: '#fbb4ae'
                        },
                        lineStyle: {
                            color: 'source',
                            opacity: 0.6
                        }
                    },
                    {
                        depth: 1,
                        itemStyle: {
                            color: '#b3cde3'
                        },
                        lineStyle: {
                            color: 'source',
                            opacity: 0.6
                        }
                    }
                ],
                lineStyle: {
                    curveness: 0.5
                }
            }
        ]
    };

    const myChart = echarts.init(chartDom.value);
    myChart.setOption(option);
}



// onMounted(() => {
//     if (props.visible) {
//         loadSankeyData();
//     }
// });
</script>

<style scoped>
.dialog-content {
    margin-bottom: 20px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
}
</style>